<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>宽度</title>

        <style type="text/css">
            .wrapper {
                border: 2px solid blue ;
                width: 80% ; /* 块元素相对于外部父元素的宽度 */
                height: 100px ;
                margin: 30px 0 ;
            }

            .first { 
                max-width: 900px ;
                width: 100% ; /* 块元素相对于外部父元素的宽度 */
                min-width: 800px ; /* 设置元素最小宽度 */
                background-color: rgba( 200 , 200, 200, 0.5 ) ;
                height: 80px ;
            }

            .second { 
                max-width: 900px ;
                width: 100% ; 
                min-width: 800px ; 
                background-color: rgba( 200 , 200, 200, 0.5 ) ;
                height: 80px ;
            }

        </style>

    </head>
    <body>

        <div class="wrapper">
            <div class="first"></div>
        </div>

        <div class="wrapper">
            <span class="second">这是<br>内联元素中的<br>文本</span>
        </div>
        
    </body>
</html>